<template>
  <div>
    <div>
      <div class="ccui-navigation">
        <el-button
          size="mini"
          type="primary-icon-medium"
          icon="icon-ccui-return"
          @click="handleBack"
          >返回</el-button
        >
        <div class="ccui-navigation-divider" />
        <!-- 面包屑 -->
        <el-breadcrumb
          class="ccui-navigation-crumbs-container"
          separator-class="el-icon-arrow-right"
        >
          <el-breadcrumb-item :to="{ path: '' }">供应平台</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '' }">结算管理</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '' }">验收管理</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '' }">到货验证</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '' }">
            <span style="color: #4a4a4a">新增合同验收</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="ccui-app-container-detail">
        <!--基本信息 -->
        <div class="ccui-app-container-detail-body">
          <!----------------------基本信息 start--------------------------- -->
          <div
            :class="focus == 0 ? 'ccui-top-title' : 'top-title'"
            @click="tabChange(0)"
          >
            <span style="cursor:pointer">基本信息</span>
          </div>
          <div
            :class="focus == 1 ? 'ccui-top-title' : 'top-title'"
            style="margin-left:20px;"
            @click="tabChange(1)"
          >
            <span style="cursor:pointer">采购清单</span>
          </div>
          <div
            :class="focus == 2 ? 'ccui-top-title' : 'top-title'"
            style="margin-left:20px;"
            @click="tabChange(2)"
          >
            <span style="cursor:pointer">附件信息</span>
          </div>
          <el-form
            label-width="100px"
            class="demo-ruleForm"
            style="margin-top:20px;"
          >
            <el-row type="flex" justify="centert" :gutter="0">
              <el-col :span="12">
                <el-form-item label="验收单编号：" prop="name">
                  <el-input
                    v-model="formData.receiptNum"
                    placeholder="请输入验收单编号"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12" :offset="4">
                <el-form-item label="当前日期：">
                  <el-date-picker
                    type="date"
                    placeholder="请选择"
                    v-model="formData.dataRange"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row type="flex" justify="center" :gutter="0">
              <el-col :span="12">
                <el-form-item label="验收单名称：">
                  <el-input
                    v-model="formData.receiptName"
                    placeholder="请输入验收单名称"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="4">
                <el-form-item label="合同名称：">
                  <el-input
                    v-model="formData.conteractName"
                    placeholder="请输入合同名称"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row type="flex" justify="center" :gutter="0">
              <el-col :span="12">
                <el-form-item label="合同编号：">
                  <el-input
                    v-model="formData.conteractNum"
                    placeholder="请输入合同编号"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="4">
                <el-form-item label="验收人：">
                  <el-input
                    v-model="formData.receiptPerson"
                    placeholder="请输入验收人"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row type="flex" justify="flex-start" :gutter="0">
              <el-col :span="12">
                <el-form-item label="车牌号：">
                  <el-input
                    v-model="formData.carNum"
                    style="width:80%"
                    placeholder="请输入车牌号"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formData: {
        receiptNum: "", //验收单编号
        dataRange: "", //当前日期
        receiptName: "", //验收单名称
        conteractName: "", //合同名称
        conteractNum: "", //合同编号
        receiptPerson: "", //验收人
        carNum: "" //车牌号
      },
      focus: 1
    };
  },
  methods: {
    handleBack() {},
    tabChange(index) {
      switch (index) {
        case 0:
          this.focus = 0;
          break;
        case 1:
          this.focus = 1;
          break;
        case 2:
          this.focus = 2;
          break;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.top-title {
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  height: 23px;
  line-height: 20px;
}
// 基本信息样式
.relative {
  position: relative;
  .chereay {
    margin-left: 10px;
    position: absolute;
  }
}

.demo-ruleForm {
  width: 80%;
  margin: 20px 0 0 50px;
}
</style>
